<template>
  <div>
    <h2>清除计时器</h2>
    <p>Time elapsed:{{ timeElapsed }}</p>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const timeElapsed = ref(0)
let timer: number | null = null

onMounted(() => {
  timer = setInterval(() => {
    timeElapsed.value++
    if (timeElapsed.value == 10) {
      clearInterval(timer as number)
    }
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer as number)
})
</script>

<style></style>
